<template>
  <div class="section-title">
    <el-icon class="icon">
      <component :is="icon"/>
    </el-icon>
    <span class="title">{{ title }}</span>
  </div>
</template>

<script setup lang="ts">
defineProps({
  title: {
    type: String,
    default: ""
  },
  icon: {
    type: String,
    default: ""
  }
});
</script>

<style scoped lang="scss">
.section-title {
  margin: 15px 0;
}

.title {
  font-size: 20px;
  vertical-align: middle;
}

.icon {
  font-size: 20px;
  margin-right: 5px;
  vertical-align: middle;
}
</style>
